<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "200px",
    },
    height: {
      type: String,
      default: "200px",
    },
    tableData: {
      type: Array, // 确保传递的数据是数组，或者根据数据类型修改
      required: true,
    },
    isRatio: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart(this.tableData);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart(tableData) {
      this.chart = this.$echarts.init(document.getElementById(this.id));
      // const xData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
      // const yData = [150, 230, 224, 218, 135, 147, 260];
      console.log(tableData);
      const xData = tableData.map((item) => (item.name ? item.name : ""));
      const yData = tableData.map((item) => item.value);

      let minRange = undefined;
      let maxRange = undefined;
      // 找到最小值和最大值
      const minValue = Math.min(...yData);
      const maxValue = Math.max(...yData);

      // 判断最大值和最小值的差异
      const threshold = 1; // 阈值，比如差值小于1时应用特殊处理

      if (maxValue - minValue < threshold) {
        // 如果差值较小，设置固定的 min 和 max 范围
        let svg = (maxValue - minValue) / 2;
        svg = parseFloat(svg.toFixed(2)); // 保留两位小数并转为数字

        minRange = minValue - svg; // 使得最小值稍微小一点
        maxRange = maxValue; // 使得最大值稍微大一点
      }

      const index = parseInt(3 * Math.random());
      const colorArr = [
        "rgba(0,191,183,1)",
        " rgba(255, 144, 128, 1)",
        "rgba(252, 230, 48, 1)",
      ];
      this.chart.setOption({
        backgroundColor: "#394056",
        // title: {
        //   x: '20',
        //   top: '20',
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: '22'
        //   },
        //   subtextStyle: {
        //     color: '#90979c',
        //     fontSize: '16'
        //   }
        // },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     textStyle: {
        //       color: '#fff'
        //     }
        //   }
        // },
        grid: {
          left: "8%", // 图表距离容器左边的距离
          right: "5%", // 图表距离容器右边的距离
          bottom: "15%", // 调整图表距离容器底部的距离，给 x 轴标签更多空间
          top: "5%", // 图表距离容器顶部的距离
        },
        // calculable: true,
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            rotate: 40, // 标签旋转40度
            textStyle: {
              color: "#fff",
              fontSize: 10, // 调整字体大小
            },
            // formatter: this.isRatio ? "{value}%" : "{value}", // 在Y轴的值后面加上百分号
          },
          data: xData,
        },
        yAxis: {
          type: "value",
          min: minRange,
          max: maxRange,
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: yData,
            type: "line",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  fontSize: 9,
                  textStyle: {
                    color: "white",
                  },
                  formatter: this.isRatio ? "{c}%" : "{c}", // 在每个柱状图的顶部显示百分号
                },
              },
            },
          },
        ],
        dataZoom: [
          {
            show: false,
            height: 30,
            xAxisIndex: [0],
            bottom: 30,
            start: 0,
            end: 100,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        // xAxis: [
        //   {
        //     type: 'category',
        //     axisLine: {
        //       lineStyle: {
        //         color: '#90979c'
        //       }
        //     },
        //     splitLine: {
        //       show: false
        //     },
        //     axisTick: {
        //       show: false
        //     },
        //     splitArea: {
        //       show: false
        //     },
        //     axisLabel: {
        //       interval: 0
        //     },
        //     data: xData
        //   }
        // ],
        // yAxis: [
        //   {
        //     type: 'value',
        //     splitLine: {
        //       show: false
        //     },
        //     axisLine: {
        //       lineStyle: {
        //         color: '#90979c'
        //       }
        //     },
        //     axisTick: {
        //       show: false
        //     },
        //     axisLabel: {
        //       interval: 0
        //     },
        //     splitArea: {
        //       show: false
        //     }
        //   }
        // ],
        // series: [
        //   {
        //     name: '数量',
        //     type: 'bar',
        //     stack: 'total',
        //     itemStyle: {
        //       normal: {
        //         color: colorArr[index], // rgba(255,144,128,1)  // rgba(252,230,48,1)
        //         barBorderRadius: 0,
        //         label: {
        //           show: true,
        //           position: 'top',
        //           formatter(p) {
        //             return p.value > 0 ? p.value : ''
        //           }
        //         }
        //       }
        //     },
        //     data: yData
        //   }
        // ]
      });
    },
  },
};
</script>
